<template>
  <!--    左侧导航栏-->
  <el-aside>
    <Logo :userName="userRef.userName" :userAvatar="userRef.userAvatar" :userId="userRef.id"/>
    <!--        用来撑开logo和导航栏-->
    <div class="strut"></div>
    <el-menu
        :default-active="router.currentRoute.value.fullPath"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        router
    >
      <!--  router属性，点击导航带路由的跳转-->
      <MenItem v-for="v in currentMenuData" :item="v" :key="v.url"/>
    </el-menu>
  </el-aside>
</template>

<script setup>
import MenItem from "./MenItem.vue";
import menuRouter from "../../router/menuData.js";
import teacherMenuData from "../../router/teacherMenuData.js";
import adminMenuData from "../../router/adminMenuData.js";
import {useRouter} from "vue-router";
import Logo from "./Logo.vue";
import {inject, ref, onMounted} from "vue";

const router = useRouter();
const userRef = inject('userRef');

// 根据用户角色显示不同菜单
const currentMenuData = ref([]);

onMounted(() => {
  const userRole = localStorage.getItem('userRole')
  console.log(userRole);
  console.log(typeof userRole);
  // 判断是否为管理员(假设角色值 1 为管理员 2为教师端)
  if(userRole == 1) {
    currentMenuData.value = [...menuRouter,...adminMenuData];
  } else if(userRole == 2){
    currentMenuData.value = [...menuRouter,...teacherMenuData];
  }else {
    currentMenuData.value = menuRouter;
  }
})

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style scoped lang="less">
@import "src/assets/css/common.less";
.strut{
  background: @color;
  height: 10px
}

.el-aside{
  width: @NavMenuAsideWidth;
  height: 100%;
  margin: 0;
  padding:0;
  overflow: hidden;
  background: @color;
  .el-menu{
    border-right:0;
    background: @EleColor;
    z-index: 10;
  }
}
</style>
